<template>
  <BaseDialog
    ref="baseDialog"
    :title="isEdit ? '编辑菜单' : '新增菜单'"
    @confrim="confrim"
    @cancel="close"
  >
    <BaseForm
      labelWidth="160px"
      :size="'medium'"
      :fromIems="fromIems"
      ref="BaseForm"
      @submit="submit"
      @edit="edit"
    ></BaseForm>
  </BaseDialog>
</template>

<script>
import _ from "lodash";
import { add, edit } from "@/api/menu";
import { Message } from "element-ui";
export default {
  data() {
    return {
      title: "",
      fromIems: [
        {
          valueType: "input",
          label: "菜单标题",
          dataIndex: "name",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "select",
          label: "菜单类型",
          dataIndex: "type",
          options: [
            {
              label: "菜单",
              value: 1,
            },
            {
              label: "按钮",
              value: 2,
            },
          ],
          rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "权限编码",
          dataIndex: "permCode",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },

        {
          valueType: "input",
          label: "菜单URL",
          dataIndex: "path",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "组件路径",
          defaultValue: "Layout",
          dataIndex: "component",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "select",
          label: "是否缓存",
          dataIndex: "keepalive",
          defaultValue: 0,
          options: [
            {
              label: "缓存",
              value: 1,
            },
            {
              label: "不缓存",
              value: 0,
            },
          ],
          rules: [{ required: true, message: "请选择", trigger: "blur" }],
        },
        {
          valueType: "input",
          label: "重定向",
          dataIndex: "redirect",
        },
        {
          valueType: "select",
          label: "菜单图标",
          dataIndex: "icon",
          options: [
            {
              label: "概览",
              value: "iconfont icon-fenxi",
            },
            {
              label: "设备",
              value: "iconfont  icon-shebei1",
            },
            {
              label: "订单",
              value: "iconfont icon-dingdan1",
            },
            {
              label: "企业",
              value: "iconfont icon-qiye",
            },
            {
              label: "分享",
              value: "iconfont icon-fenxiang",
            },
            {
              label: "设置",
              value: "iconfont icon-shezhi",
            },
            {
              label: "换新",
              value: "iconfont icon-huanxin",
            },
            {
              label: "商家 ",
              value: "iconfont icon-shangjiaruzhu",
            },
            {
              label: "商品",
              value: "iconfont icon-gouwu",
            },

            {
              label: "质检",
              value: "iconfont icon-zhiliang",
            },
            {
              label: "地图",
              value: "iconfont icon-ditu",
            },
            {
              label: "电影视频",
              value: "iconfont icon-changjing-",
            },
            {
              label: "分类",
              value: "iconfont icon-fenlei",
            },
            {
              label: "问题",
              value: "iconfont icon-changjianwenti",
            },
            {
              label: "报表",
              value: "iconfont icon-baobiao",
            },
            {
              label: "售后",
              value: "iconfont icon-shouhou",
            },
            {
              label: "客服",
              value: "iconfont icon-kefu",
            },
            {
              label: "仓库",
              value: "iconfont icon-zanwushuju",
            },
          ],
        },
      ],
      isEdit: false,
    };
  },
  methods: {
    open(row, id) {
      row ? (this.isEdit = true) : (this.isEdit = false);
      // 重新赋值 fromIems 以触发 watch 监听器
      this.fromIems = _.cloneDeep(this.fromIems);
      this.$refs.baseDialog.open();
      this.$nextTick(() => {
        if (row) {
          for (var k in row) {
            this.$set(this.$refs.BaseForm.form, k, row[k]);
          }
        } else {
          this.$refs.BaseForm.form = {};
          if (id) {
            this.$set(this.$refs.BaseForm.form, "parentId", id);
          } else {
            this.$set(this.$refs.BaseForm.form, "parentId", 0);
          }
        }
      });
    },
    close() {
      this.$refs.baseDialog.close();
      this.$refs.BaseForm.rest();
    },
    confrim() {
      if (this.isEdit) {
        this.$refs.BaseForm.edit();
      } else {
        this.$refs.BaseForm.submit();
      }
    },
    async submit(data) {
      console.log(data, "---");
      let params = { ...data };
      params.platform = 1;
      const res = await add(params);
      if (!res.status) {
        Message.success("添加成功");
        this.$emit("success");
        this.close();
      }
    },
    async edit(data) {
      const res = await edit({
        id: data.id,
        permCode: data.permCode,
        name: data.name,
        parentId: data.parentId,
        path: data.path,
        icon: data.icon,
        platform: 1,
        type: data.type,
        url: data.url,
        redirect: data.redirect,
        keepAlive: data.keepAlive,
      });
      if (!res.status) {
        Message.success("编辑成功");
        this.$emit("success");
        this.close();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
